iT邦幫忙

2022 iThome 鐵人賽

DAY 18
0
自我挑戰組

CSS UI(動畫)相關系列 第 18

D18看YT學 CSS動畫_文字對半展開

  • 分享至 

  • xImage
  •  

今天的參考
https://www.youtube.com/watch?v=4Dba1FJ-A0A&list=PL5e68lK9hEzd-ZM4Km6xUia-mxQp52G6U&index=9
然後,有程式碼的數值會用到下列網址(用於切形狀)
https://bennettfeely.com/clippy/

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>測試</title>
	<link href="C1.css" rel="stylesheet">
</head>
<body>
	<h2>
		範例字樣
		<span>範例字樣</span>
		<span>範例字樣</span>
		<span>~~123內容文本**147~~</span>
	</h2>
</body>
</html>

CSS

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body{
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	font-family: consolas;
}

h2{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	margin: 0;
	padding: 0;
	font-size: 4em;
	color: transparent;
	text-transform: uppercase;
}

h2 span:nth-child(1){
	position: absolute;
	top: 0;
	left: 0;
	color: #000;
	transition: 0.5s;
	clip-path: polygon(100% 50%, 100% 0%, 0 0, 0 50%);/*網址切形狀*/
	overflow: hidden;
}

h2:hover span:nth-child(1){
	transform: translateY(-18px);
}

h2 span:nth-child(2){
	position: absolute;
	top: 0;
	left: 0;
	color: #000;
	transition: 0.5s;
	clip-path: polygon(100% 50%, 100% 100%, 0 100%, 0 50%);/*網址切形狀*/
	overflow: hidden;
}

h2:hover span:nth-child(2){
	transform: translateY(18px);
}

h2 span:nth-child(3){
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%) scaleY(0);
	width: 91%;
	color: #FFF;
	background: #26347A;
	font-size: 0.25em;
	font-weight: 500;
	letter-spacing: 0.7em;
	text-align: center;
	padding-left: 20px;
	margin-left: 5px;
	transition: 0.5s;
}

h2:hover span:nth-child(3){
	transform: translateY(-50%) scaleY(1);
}

成果(是否HOVER)
https://ithelp.ithome.com.tw/upload/images/20221002/20141355634uqEccmN.jpghttps://ithelp.ithome.com.tw/upload/images/20221002/201413550hbt00CKS6.png
今天先這樣,明天找別的~~


上一篇
D17看YT學 CSS動畫_線條扭動
下一篇
D19看YT學 CSS動畫_方形動畫
系列文
CSS UI(動畫)相關30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言